<template>
<div>
    <el-alert
   :closable="false"
    type="info"
    show-icon>
    共{{counts}}条记录
  </el-alert>
  <el-table :data="list" style="width: 100%">
    <el-table-column label="序号" type="index" width="50">
       <template #default="{$index}">
            {{ (params.page-1)*params.pagesize+$index+1 }}
          </template>
    </el-table-column>
    <el-table-column label="所属学科" prop="subjectName"></el-table-column>
    <el-table-column label="目录名称" prop="directoryName"></el-table-column>
    <el-table-column label="创建者" prop="creatorID"></el-table-column>
    <el-table-column label="创建日期" prop="addDate">
      <template #default="{row}">
            <span>{{ row.timeOfEntry | dateformat }}</span>
          </template>
    </el-table-column>
    <el-table-column label="面试题数量" prop="totals"></el-table-column>
    <el-table-column label="状态" prop="state">
      <template #default="{row}">
        <span>{{row.state ? '已禁用' :'已启用'}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200px">
      <template #default="{row}">
      <el-button type="text" @click="opening(row)">

        <span>{{row.state ? '启用' :'禁用'}}</span>
      </el-button>
      <el-button type="text" :disabled="row.state ? true : false" @click="update(row)">修改</el-button>
      <el-button type="text" :disabled="row.state ? true : false" @click="deleteData(row)">删除</el-button>
      </template>

    </el-table-column>
  </el-table>
  <el-pagination @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, counts]"
      :page-size="pageSize"
      layout=" prev, pager,next, sizes,jumper"
      :total="counts" background >
  </el-pagination>
</div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    counts: {
      type: Number
    },
    params: {
      type: Object,
      default: () => ({})
    }

  },
  data () {
    return {
      currentPage: null,
      pageSize: null,
      newState: ''
    }
  },
  methods: {
    handleSizeChange (page) {
      this.$emit('changeSize', page)
    },
    handleCurrentChange (page) {
      this.$emit('changePage', page)
    },
    opening (row) {
      this.$emit('updateState', row.id)
      this.$message.success('操作成功')
    },
    update (row) {
      this.$emit('updateData', row)
    },
    deleteData (row) {
      this.$emit('deleteData', row)
    }
  }
}
</script>

<style scoped lang='scss'>
.el-pagination{
  padding: 10px 0;
  float: right;
}
</style>
